<script lang="ts" setup>
import _ from 'lodash'
import { Column } from './index.vue';

const props = defineProps({
  columns_show: {
    type: Array,
    default: [] as Column[]
  }
})
const columns = ref(_.cloneDeep(props.columns_show))
const enter = () => {
  props.columns_show.forEach((column, index) => {
    column.value = columns.value[index].value
  })
  show.value = false
}

const close = () => {
  show.value = false
}

const show = ref(false)
</script>

<template>
  <div class="w-full h-full" @click="show = true">
    自定义列显示
  </div>

  <r-dialog v-model="show" width="250">
    <template #header>
      自定义列显示
    </template>

    <template #default>
      <div class="w-full h-60 overflow-auto flex justify-center flex-wrap *:w-[80%] *:flex *:items-center *:m-1">
        <div class="w-full flex *:m-1" v-for="column in columns">
          <el-checkbox v-model="column.value" />
          <div>{{ column.label }}</div>
        </div>
      </div>
    </template>

    <template #footer>
      <div class="flex justify-end items-center">
        <el-button type="primary" @click="enter">确定</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </r-dialog>
</template>

<style scoped></style>